<template>
	<el-row class="warp">
		<el-col :span='24'>
			<el-col :span='24' class="warp-breadcrum" style="margin-bottom:20px">  
				<el-breadcrumb  separator="/">
					<el-breadcrumb-item><b>首页</b></el-breadcrumb-item>
					<el-breadcrumb-item>用户列表</el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
			<el-col :span='24'>
				<el-form :inline='true' :model='filters'>
					<el-form-item>
						<el-input placeholder='日期' style='width:240px' v-model='filters.birth'></el-input>
					</el-form-item>
					<el-form-item>
						<el-input placeholder='姓名' style='width:240px' v-model='filters.name'></el-input>
					</el-form-item>
					<el-form-item>
						<el-input placeholder='地址' style='width:240px' v-model='filters.addr'></el-input>
					</el-form-item>
					
					<el-form-item style='float:right'>
						<el-button type='primary' @click='getUser'>查询</el-button>
						<el-button type='primary' @click='addUser'>新增</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-table :data='tableData' highlight-current-row   v-loading='loading'>
				<el-table-column prop='birth' label='日期' width='240'></el-table-column>
				<el-table-column prop='name' label='姓名' width='240'></el-table-column>
				<el-table-column prop='addr' label='地址' ></el-table-column>
				<el-table-column label="操作" width="150">
        		 <!--组件-->
		          <template scope="scope">
		            <el-button size="small" @click="showEditDialog(scope.$index,scope.row)">编辑</el-button>
		            <el-button size="small" @click="delBook(scope.$index,scope.row)"  type="danger">删除</el-button>
		          </template>
		        </el-table-column>
			</el-table>
			
			<div class="block" style='float: right;'>
			  <el-pagination layout="prev, pager, next" :total="total" @current-change='paginationChange' :page-size='10' style='float:right'>
			  </el-pagination>
			</div>
			
			<!--新增dialog-->
			<el-dialog title='新增' v-model='addDialog' :close-on-click-modal='false'>
				<el-form :model='addForm' :rules='addFormRules' ref='addForm'>
					<el-form-item label='日期' prop='birth'>
						<!--<el-input v-model='addForm.birth'></el-input>-->
						<el-date-picker type="date" placeholder="选择日期" v-model='addForm.birth'></el-date-picker>
					</el-form-item>
					<el-form-item label='姓名' prop='name'>
						<el-input v-model='addForm.name'></el-input>
					</el-form-item>
					<el-form-item label='地址' prop='addr'>
						<el-input v-model='addForm.addr'></el-input>
					</el-form-item>
				</el-form>
				<div slot='footer' class='dialog-footer'>
					<el-button @click.native='addDialog = false'>取消</el-button>
					<el-button @click.native='addSubmit' :loading='addLoading' type='primary' >提交</el-button>
				</div>
			</el-dialog>
			
			<!--编辑 dialog-->
			<el-dialog title='编辑' v-model='editDialog' :close-on-click-modal='false'>
				<el-form :model='editForm' :rules='editFormRules' ref='editForm'>
					<el-form-item label='日期'>
						<el-date-picker type="date" placeholder="选择日期" v-model='editForm.birth'></el-date-picker>
					</el-form-item>
					<el-form-item label='姓名' prop='name'>
						<el-input v-model='editForm.name'></el-input>
					</el-form-item>
					<el-form-item label='地址' prop='addr'>
						<el-input v-model='editForm.addr'></el-input>
					</el-form-item>
				</el-form>
				<div slot='footer' class='dialog-footer'>
					<el-button @click.native='editDialog = false'>取消</el-button>
					<el-button @click.native='editSubmit' :loading='editLoading' type='primary' >提交</el-button>
				</div>
			</el-dialog>
		</el-col>
	</el-row>
</template>

<script>
	import util from '../../common/util'
	import { reqGetBookList,reqAddBook,reqDeleteBook,reqEditBook} from '../../api/api'
	export default{
		data(){
			return{
				loading:false,
				tableData:[],
				filters:{
					name:'',
					addr:'',
					birth:''
				},
				
				page:1,
				total: 0,
				/*新增*/
				addDialog:false,
				addLoading:false,
				addForm: {
		          name: '',
		          birth: '',
		          addr: '',
		        },
		        addFormRules: {
		          name: [
		            {required: true, message: '请输入姓名', trigger: 'blur'}
		          ],
		          
		          addr: [
		            {required: true, message: '请输入地址', trigger: 'blur'}
		          ]
		        },
		        /*编辑*/
		        editDialog:false,
		        editLoading:false,
		        editForm: {
		          id:0,	
		          name: '',
		          birth: '',
		          addr: '',
		        },
		        editFormRules: {
		          name: [
		            {required: true, message: '请输入姓名', trigger: 'blur'}
		          ],
		          birth: [
		            {required: true, message: '请输入日期', trigger: 'blur'}
		          ],
		          addr: [
		            {required: true, message: '请输入地址', trigger: 'blur'}
		          ]
		        },
			}
		},
		methods:{
			paginationChange(val){
				this.page =  val;
				this.getUser();
			},
			//获取用户列表
			getUser:function(){
				this.loading = true;
				let para = {
					page:this.page,
					name:this.filters.name,
					addr:this.filters.addr,
					birth:this.filters.birth
				}
				reqGetBookList(para).then((res)=>{
					this.tableData = res.data.users;
					this.total = res.data.total;
					this.loading = false;
				})
			},
			addUser:function(){
				this.addDialog = true;
				this.addForm = {
					name:'',
					birth:'',
					addr:'',
				}
			},
			/*增加*/
			addSubmit:function(){
				this.$refs.addForm.validate((valid)=>{
					if(valid){
						this.addLoading = true;
						let para = Object.assign({}, this.addForm);
						para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
						reqAddBook(para).then((res)=>{
							this.addLoading = false;
							this.$message({
								message:'提交成功',
								type:'success'
							});
							this.$refs['addForm'].resetFields();
							this.addDialog = false;
							this.getUser();
						})
					}
				})
			},
			/*编辑显示*/
			showEditDialog:function(index,row){
				this.editDialog = true;
				this.editForm = Object.assign({},row);
			},
			editSubmit:function(){
				this.$refs.editForm.validate((valid)=>{
					
					if(valid){
						this.$confirm('确认提交吗','提示',{}).then(()=>{
							
							this.editDialog = true;
							let para = Object.assign({}, this.editForm);
							console.log(para)
							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
							var  a = para.birth;
							var  b = para;
							reqEditBook(para).then((res)=>{
								this.editDialog = false;
								this.$message({
									message:'提交成功',
									type:'success'
								});
								this.$refs['editForm'].resetFields();
								this.editDialog = false;
								this.getUser();
							})
						})
					}
				})
			},
			/*删除*/
			delBook:function(index,row){
				this.$confirm('确认删除该记录吗？','提示',{type:'warning'}).then(()=>{
					this.loading = true;
					let para = { id:row.id};
					reqDeleteBook(para).then((res)=>{
						this.loading = false;
						this.$message({
							message:'删除成功',
							type :'success'
						});
						this.getUser();
					});
				}).catch(()=>{
					
				});
			},
		},
		mounted(){
			this.getUser();
		}
	}
</script>

<style>
</style>